import Layout from '../../lib/components/Layout';
export default Layout;

# offset

The `offset{:.function}` middleware displaces the floating
element from its reference element.

<Chrome center className="pt-16 pb-24">
  <div className="flex gap-4">
    <Floating
      portaled
      middleware={[{name: 'offset', options: 0}]}
    >
      <div className="grid place-items-center w-32 h-32 mx-auto border-2 border-gray-1000 border-dashed">
        0px
      </div>
    </Floating>
    <Floating
      portaled
      middleware={[{name: 'offset', options: 10}]}
    >
      <div className="grid place-items-center w-32 h-32 mx-auto border-2 border-gray-1000 border-dashed">
        10px
      </div>
    </Floating>
  </div>
</Chrome>

## Usage

```js
import {computePosition, offset} from '@floating-ui/dom';

computePosition(referenceEl, floatingEl, {
  middleware: [offset(10)],
});
```

## Order

`offset{:.function}` should generally be placed at the beginning
of your middleware array.

## Options

These are the options you can pass to `offset(){:js}`.

```ts
type Options =
  | number
  | {mainAxis?: number; crossAxis?: number}
  | (({
      reference: Rect,
      floating: Rect,
      placement: Placement,
    }) => number | {mainAxis?: number; crossAxis?: number});
```

```js
// number: distance offset (mainAxis shorthand)
offset(10);

// object: configure both axes
offset({
  mainAxis: 10, // distance
  crossAxis: 10, // skidding
});

// function: takes Rects and placement and return a number
offset(({reference}) => reference.height);

// function: takes Rects and placement and return an object
offset(({floating, placement}) => ({
  crossAxis:
    placement === 'top' ? floating.height : floating.width,
}));
```

### Negative values

Using the function technique above in combination with negative
values enables the ability to "inset" the floating element such
that it is positioned on top of the reference element in some
fashion.

This is useful for UI components such as select dropdowns where
it should be positioned relative to an item inside the dropdown
list.
